<template>
	<view class="grid-columns-3 gap-12">
		<view class="flex flex-column gap-4 flex-y-center" @click="to(1)">
			<text class="fs-20 fw-bold">{{props.data.scene}}</text>
			<text class="fs-14 text-666">数字形象</text>
		</view>
		<view class="flex flex-column gap-4 flex-y-center" @click="$page.switch('/pages/works/index')">
			<text class="fs-20 fw-bold">{{props.data.works}}</text>
			<text class="fs-14 text-666">数字分身</text>
		</view>
		<!-- <view class="flex flex-column gap-4 flex-y-center">
			<text class="fs-20 fw-bold">1</text>
			<text class="fs-14">定制音色</text>
		</view> -->
		<view class="flex flex-column gap-4 flex-y-center" @click="to(2)">
			<text class="fs-20 fw-bold">{{props.data.voice}}</text>
			<text class="fs-14 text-666">克隆声音</text>
		</view>
	</view>
</template>

<script setup>
	import { $page } from '@/utils';
	import { useStorage } from '@/utils/storeage.js'
	const { set } = useStorage()
	const props = defineProps({
		data: {
			type: [Array, Object],
			default: {
				voice: 0,
				works: 0,
				scene: 0
			}
		}
	})

	const to = (e) => {
		set('TYPE', e)
		$page.switch('/pages/common/index')
	}
</script>

<style>
</style>